import React, { Component } from 'react'


class Bpp extends Component {
  render(){
    return (<div> <h1>你好世界 {this.state} </h1> </div>)
  }

   // ------------------------ 组件卸载 -----------------------------
   componentWillUnmount(){
    console.log('Bpp 组件被卸载了');
  }


}



export default class App extends Component {

// ------------------- 挂载阶段 -------------------------
  constructor(props){
    super(props)
    this.state = {
      count: 100
    }
  }

  // 初始阶段挂载是调用，更新时也会被调用
  // 因为挂载和更新有专门的方法，所以该方法使用频率比较低
  // static getDerivedStateFromProps(props, state){
  //   console.log(props, state);

  //   // 返回值是修改 state 数据的
  //   return {
  //     count: state.count + 1
  //   }
  // }



  // *********** render 会在挂载时调用，在更新时也会被调用
  render() {
    console.log('render 被调用了');
    return (
      <div>App -- {this.props.title} -- {this.state.count} --- <button onClick={()=>{
        this.setState({
          count: this.state.count + 1
        })
      }}>点击修改 count</button>

      {this.state.count === 100 && <Bpp />}

       </div>
    )
  }

  // **************** 初始挂载阶段会调用该方法
  componentDidMount() {
    // 一般情况下可以在这里进行数据请求
    console.log('组件挂载： componentDidMount');
  }

  // ------------------- 挂载阶段 -------------------------

  // ------------------- 更新阶段 -------------------------


  // ------------------- 更新阶段 -------------------------
  // 更新时调用，用来提升 react 性能的方法，指明在特定的情况下才会重新渲染
  // 在不是必须的情况下就可以返回 false 不在渲染
  // 该方法使用频率比较低
  shouldComponentUpdate(nextProps, nextState){
    console.log('你好：',nextProps, nextState);

    if(nextState.count === 105){
      // 返回 false 的时候将不会执行 render 函数重新渲染了
      return false
    }else {
      // 返回 true 就是会执行 render 渲染最新数据
      return true
    }
  }


  // 在最近一次渲染输出（提交到 DOM 节点）之前被调用
  getSnapshotBeforeUpdate(prevProps, prevState){
    // 可以获取到更新之前的值
    console.log(prevProps, prevState);

    // 这里的返回值是被作为 componentDidUpdate 的第三个参数使用
    return '你好中国'
  }


  // ************* 组件更新调用
  componentDidUpdate(prevProps, prevState, snapshot){
    console.log('更新：componentDidUpdate',prevProps, prevState, snapshot);
  }


  // ------------------------ 组件卸载 -----------------------------
  // componentWillUnmount(){
  //   console.log('组件被卸载了');
  // }


  // 用来捕获后代组件错误信息用的
  // componentDidCatch(error, info){
  //   console.log('11111111111111111111111',error,'-----', info);
  // }


}
